<template>
    <div id="h1">
        <NavBar id="navbar"></NavBar>
        <Bgc1></Bgc1>
        <C1 id="c1"></C1>
        <C2 id="c2"></C2>
        <C10></C10>
        <Tail></Tail>
    </div>
</template>

<script>
    import NavBar from '../components/home/NavBar'
    import Bgc1 from '../components/home/Bgc1'
    import C1 from '../components/home/C1'
    import C2 from '../components/home/C2'
    import C10 from '../components/home/C10'
    import Tail from '../components/home/Tail'
    export default {
        name: "Home",
        components:{
            NavBar,
            Bgc1,
            C1,
            C10,
            C2,
            Tail
        }
    }
</script>

<style scoped>

    #navbar{
        position: absolute;
        color: white;
        height: 6vh;
        border-bottom: 1px solid white;
        background-color: pink;
    }
    #c1{
        width: 80vw;
        border: 1px solid #707070;
        margin: 0 auto;
    }
</style>